<template>
	<!-- 可以用作国庆活动模板 -->
	<view class="national-day">
		<view class="national-day-scroll-view" v-if="show">
			<movable-area class="share">
				<movable-view direction="all" class="service-img">
					<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/national-day/service_icon.png" @click="service"></image>
				</movable-view>
				<movable-view direction="all" class="share-img">
					<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/national-day/share.png?v=1" @click="share"></image>
				</movable-view>
			</movable-area>
			<view class="national-day-scroll-view-mask"></view>
			<view class="national-day-main">
				<view class="national-day-toppic">
					<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/national-day/top-pic.png?v=1" mode="widthFix"></image>
				</view>
				<block v-for="(item,index) in shelf_list" :key="index">
					<block v-if="index==0">
						<view class="national-day-pic1">
							<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/national-day/pic1.png?v=1" mode="widthFix"></image>
						</view>
						<view class="national-day-shelf-1">
						<view class="national-day-shelf-1-top">
							<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/national-day/shelf-top.png?v=1" mode="widthFix"></image>
						</view>
						<view class="national-day-shelf-1-tit">
							<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/national-day/title-1.png?v=1"></image>
						</view>
						<view class="national-day-shelf-1-content">
							<view class="goods-list">
								<view class="goods-item" v-for="(data,i) in item.goods_list" :key="i" @click="goProInfo(data.goods_id,data.goods_type)">
									<view class="goods-item-top">
										<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/national-day/goods-top.png?v=1" mode="widthFix"></image>
									</view>
									<view class="goods-item-main">
										<view class="goods-image">
											<view class="tag">
												<text 
													:class="[{
														short: data.cutprice.toString().length < 5 && data.cutprice.toString().length > 1,
														'one': data.cutprice.toString().length==1
													}]">
													{{data.cutprice}}
												</text>
												<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/national-day/icon1.png?v=1"></image>
											</view>
											<image :lazy-load="true" :src="data.image_middle" mode="widthFix" class="main-img"></image>
										</view>
										<view class="goods-name">{{data.goods_name}}</view>
										<view class="goods-brief">{{data.brief}}</view>
										<view class="goods-price-bar">
											<view class="goods-price-bar-left">
												<view class="market-price">市场参考价:￥{{data.market_price}}</view>
												<view class="sale-price">活动价:￥<text class="goods-price">{{data.retail_price}}</text></view>
											</view>
											<view class="goods-price-bar-btn">立即抢购 >></view>
										</view>
									</view>
									<view class="goods-item-bottom">
										<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/national-day/goods-bottom.png?v=1" mode="widthFix"></image>
									</view>
								</view>
							</view>
						</view>
						<view class="national-day-shelf-1-bottom">
							<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/national-day/shelf-bottom.png?v=1" mode="widthFix"></image>
						</view>
					</view>
					</block>
					<block v-if="index==1">
						<view class="national-day-pic2">
							<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/national-day/pic2.png?v=1" mode="widthFix"></image>
						</view>
						<view class="national-day-shelf-2">
						<view class="national-day-shelf-2-top">
							<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/national-day/shelf-top.png?v=1" mode="widthFix"></image>
						</view>
						<view class="national-day-shelf-2-content">
							<view class="goods-list">
								<view class="goods-item" v-for="(data,y) in item.goods_list" :key="y" @click="goProInfo(data.goods_id,data.goods_type)">
									<view class="goods-item-top">
										<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/national-day/single-goods-top.png?v=1" mode="widthFix"></image>
									</view>
									<view class="goods-item-center">
										<view class="goods-item-center-image">
											<view class="tag">
												<text
													:class="[{
														short: data.cutprice.toString().length < 5 && data.cutprice.toString().length > 1,
														'one': data.cutprice.toString().length==1,
														'three': data.cutprice.toString().length==3
													}]">
													{{data.cutprice}}
												</text>
												<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/national-day/icon1.png?v=1"></image>
											</view>
											<image :lazy-load="true" :src="data.image_middle" mode="widthFix" class="mainImg"></image>
										</view>
										<view class="goods-item-center-info">
											<view class="goods-name">{{data.goods_name}}</view>
											<view class="market-price">市场参考价:￥{{data.market_price}}</view>
											<view class="sale-price">活动价:￥<text class="goods-price">{{data.retail_price}}</text></view>
											<view class="goods-price-bar-btn">立即抢购 >></view>
										</view>
									</view>
									<view class="goods-item-bottom">
										<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/national-day/single-goods-bottom.png?v=1" mode="widthFix"></image>
									</view>
								</view>
							</view>
						</view>
						<view class="national-day-shelf-2-bottom">
							<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/national-day/shelf-bottom.png?v=1" mode="widthFix"></image>
						</view>
					</view>
					</block>
				</block>
				<view class="tips">备注：数量有限先购先得，活动特价产品不支持退换。</view>
			</view>
			
			<!-- 客服 -->
			<uni-popup type="center" ref="server">
				<pt-server></pt-server>
			</uni-popup>
			<!-- 客服 -->
			
		</view>
		<pt-loading></pt-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				shelf_list: [],
				// 足迹参数
				addFootParam: {
					start_time: '',
					end_time: '',
					stay_time: 0
				},
				posterImg: '',
				showCanvas: false
			};
		},
		onReady() {
			this.addFootParam.start_time = parseInt(new Date().getTime() / 1000)
		},
		onLoad(options) {
			this.init()
			if(uni.getStorageSync('userInfo')){
				this.addFoot('查看国庆活动')
			}
			if(options.parent_id){
				uni.setStorageSync('parent_id',options.parent_id)
				// 如果用户从分享的小程序卡片点击进来的,设置一个url缓存,登录后返回当前缓存url
				let pages = getCurrentPages();
				let curPage = pages[pages.length - 1];
				uni.setStorageSync('newurl',curPage.$page.fullPath)
				this.$u.api.binding_refer({id: options.parent_id}).catch(() => {
					console.log('接口报错：绑定失败')
					// uni.showToast({
					// 	icon: 'none',
					// 	title: '绑定失败'
					// })
				})
			}
			let scene
			if(options.scene){
				scene = decodeURIComponent(options.scene)
				uni.setStorageSync('parent_id',this.filterUrlParam(scene).parent_id)
				// 如果用户从分享的小程序卡片点击进来的,设置一个url缓存,登录后返回当前缓存url
				let pages = getCurrentPages();
				let curPage = pages[pages.length - 1];
				uni.setStorageSync('newurl',curPage.$page.fullPath)
				this.$u.api.binding_refer({id: this.filterUrlParam(scene).parent_id}).catch(() => {
					console.log('接口报错：绑定失败')
					// uni.showToast({
					// 	icon: 'none',
					// 	title: '绑定失败'
					// })
				})
			}
		},
		methods: {
			// 解析小程序scene参数
			filterUrlParam(urlSearch){
			  let ret = {}
			  let regParam = /([^&=]+)=([\w\W]*?)(&|$|#)/g
			  if (urlSearch) {
			    var strParam = urlSearch;
			    var result
			    while ((result = regParam.exec(strParam)) != null) {
			      ret[result[1]] = result[2]
			    }
			  }
			  return ret
			},
			posterFun(e){
				this.showCanvas = e.show
			},
			addFoot(where,goods_id,isMerchant){
				this.$u.api.AddFoot({
					// #ifdef MP-WEIXIN
					type: 1,
					// #endif
					// #ifdef APP-PLUS
					type: 2,
					// #endif
					// #ifdef H5
					type: 3,
					// #endif
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:'',
					client: 1,
					where: where,
					stay_time: this.addFootParam.stay_time,
					goods_id: isMerchant?0:goods_id,
					store_goods_id: isMerchant?goods_id:0,
					is_new: 1
				})
			},
			init(){
				this.$u.api.ActivityShelf({shelf_id: 59}).then(res => {
					this.show = true
					this.shelf_list = res.datas.shelf_list
					this.shelf_list.forEach(data => {
						data.goods_list.forEach(item => {
							this.$set(item,'cutprice',item.market_price - item.retail_price)
						})
					})
					this.posterImg = res.datas.img
					uni.setNavigationBarTitle({
						title: res.datas.name
					})
					if(uni.getStorageSync('userInfo')){
						this.$u.mpShare = {
							title: res.datas.name,
							path: '/events/national-day?parent_id='+ JSON.parse(uni.getStorageSync('userInfo')).user_id,
							imageUrl: res.datas.image
						}
					}else{
						this.$u.mpShare = {
							title: res.datas.name,
							path: '/events/national-day',
							imageUrl: res.datas.image
						}
					}
				})
			},
			goProInfo(goods_id,goods_type){
				switch (Number(goods_type)){
					case 1:
						if(uni.getStorageSync('userInfo')){
							this.addFoot('查看国庆活动商品',goods_id)
						}
						getApp().goProInfo(goods_id)
						break;
					case 2:
						if(uni.getStorageSync('userInfo')){
							this.addFoot('查看国庆活动商品',goods_id,true)
						}
						getApp().goProInfo(goods_id,true)
						break;
					case 3:
						if(uni.getStorageSync('userInfo')){
							this.addFoot('查看国庆活动N98套餐',goods_id)
						}
						uni.navigateTo({
							animationDuration: 500,
							url: '/pages/package/n98-info?group_id='+goods_id
						})
						break;
					case 4:
						if(uni.getStorageSync('userInfo')){
							this.addFoot('查看国庆活动全屋套餐',goods_id)
						}
						uni.navigateTo({
							animationDuration: 500,
							url: '/pages/package/house-info?group_id='+goods_id
						})
						break;
				}
			},
			share(){
				if(uni.getStorageSync('userInfo')){
					let pages = getCurrentPages();
					let curPage = pages[pages.length - 1];
					uni.navigateTo({
						animationDuration: 500,
						url: '/events/events-poster?url='+encodeURIComponent(curPage.$page.fullPath)+'&posterImg='+encodeURIComponent(this.posterImg)+'&name=国庆活动'
					})
				}else{
					uni.showToast({
						icon: 'none',
						title: '请先登录',
						duration: 1500
					})
					setTimeout(() => {
						// #ifdef APP-PLUS
						uni.navigateTo({
							animationDuration: 500,
							url: '/pages/login/app-login'
						})
						// #endif
						// #ifdef H5 || MP
						uni.navigateTo({
							animationDuration: 500,
							url: '/pages/login/login'
						})
						// #endif
					},1500)
				}
			},
			service(){
				if(uni.getStorageSync('userInfo')){
					this.$refs.server.open()
				}else{
					uni.showToast({
						icon: 'none',
						title: '请先登录',
						duration: 1500
					})
					setTimeout(() => {
						// #ifdef APP-PLUS
						uni.navigateTo({
							animationDuration: 500,
							url: '/pages/login/app-login'
						})
						// #endif
						// #ifdef H5 || MP
						uni.navigateTo({
							animationDuration: 500,
							url: '/pages/login/login'
						})
						// #endif
					},1500)
				}
			}
		}
	}
</script>

<style lang="scss">
	.national-day{
		height: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		.national-day-scroll-view{
			position: absolute;
			width: 100%;
			min-height: 100%;
			left: 0;
			top: 0;
			background: linear-gradient(90deg, rgba(121, 25, 16, 0.91), rgba(173, 35, 28, 0.91), rgba(121, 25, 16, 0.91));
			.national-day-scroll-view-mask{
				position: absolute;
				height: 100%;
				width: 100%;
				left: 0;
				top: 0;
				background-image: url(https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/national-day/bg-mask.png?v=1);
				background-size: 100%;
				background-repeat: repeat-y;
			}
			.national-day-main{
				position: relative;
				z-index: 10;
				.national-day-toppic{
					image{
						width: 100%;
					}
				}
				.national-day-pic1,.national-day-pic2{
					text-align: center;
					padding-top: 50rpx;
					image{
						width: 680rpx;
						height: 361rpx;
					}
				}
				.national-day-shelf-1{
					width: 688rpx;
					margin: 142rpx auto 0;
					.national-day-shelf-1-top,.national-day-shelf-1-bottom{
						image{
							display: block;
							width: 688rpx;
							height: 37rpx;
							vertical-align: top;
						}
					}
					.national-day-shelf-1-tit{
						text-align: center;
						margin-top: -110rpx;
						position: relative;
						z-index: 5;
						image{
							display: block;
							vertical-align: top;
							width: 574rpx;
							height: 120rpx;
							margin: 0 auto;
						}
					}
					.national-day-shelf-1-content{
						background-image: url(https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/national-day/shelf-bg.png?v=1);
						background-size: 100%;
						background-repeat: repeat-y;
						margin-top: -10rpx;
						/* #ifdef H5 */
						margin-top: -12rpx;
						/* #endif */
						padding: 50rpx 40rpx 30rpx;
						.goods-list{
							.goods-item{
								margin-bottom: 30rpx;
								&:last-child{
									margin-bottom: 0;
								}
								.goods-item-top,.goods-item-bottom{
									image{
										width: 100%;
										display: block;
										vertical-align: top;
									}
								}
								.goods-item-main{
									padding: 25rpx;
									background-image: url(https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/national-day/goods-bg.png?v=1);
									background-size: contain;
									background-repeat: repeat-y;
									.goods-image{
										position: relative;
										.main-img{
											width: 100%;
											border-radius: 16rpx;
										}
										.tag{
											position: absolute;
											bottom: -50rpx;
											right: 25rpx;
											z-index: 2;
											width: 113rpx;
											height: 108rpx;
											text{
												position: absolute;
												z-index: 1;
												color: #FFF;
												/* #ifdef H5 || MP-WEIXIN */
												transform: rotate(22deg);
												/* #endif */
												/* #ifdef APP-PLUS */
												transform: rotate(20deg);
												/* #endif */
												top: 48rpx;
												left: 0;
												font-size: 24rpx;
												font-weight: bold;
												&.short{
													left: 10rpx;
												}
												&.one{
													left: 35rpx;
												}
											}
											image{
												width: 113rpx;
												height: 108rpx;
											}
										}
									}
									.goods-name{
										color: #72140C;
										font-size: 36rpx;
										font-weight: bold;
										margin-top: 20rpx;
									}
									.goods-brief{
										color: #72140C;
										font-size: 22rpx;
										margin-top: 10rpx;
									}
									.goods-price-bar{
										display: flex;
										align-items: center;
										justify-content: space-between;
										background-clip: padding-box, border-box;
										background-origin: padding-box, border-box;
										background-image: linear-gradient(-6deg, #b61a14, #d4261b), linear-gradient(to left, #f9e2b5, #fdbb67);
										border-top-left-radius: 26px;
										border-bottom-left-radius: 26px;
										border: 4rpx solid transparent;
										border-radius: 80rpx;
										height: 98rpx;
										padding: 0 20rpx;
										margin-top: 20rpx;
										.goods-price-bar-left{
											flex: 1;
											min-width: 0;
											position: relative;
											height: 100%;
											.market-price{
												position: absolute;
												top: 15rpx;
												color: #FEB864;
												font-size: 18rpx;
												text-decoration: line-through;
												/* #ifdef H5 */
												transform: scale(.9);
												margin-left: -10rpx;
												/* #endif */
											}
											.sale-price{
												margin-top: 40rpx;
												color: #F9E1B4;
												font-size: 24rpx;
												white-space: nowrap;
												display: flex;
												align-items: center;
												.goods-price{
													background: linear-gradient(to top,#ff8a00,#FFF);
													background-clip: text;
													-webkit-background-clip: text;
													text-fill-color: transparent;
													-webkit-text-fill-color: transparent;
													font-weight: bold;
													font-size: 50rpx;
													text-shadow: 0 0 6rpx rgba(0, 0, 0, 0.15);
													margin-top: -20rpx;
													/* #ifdef H5 */
													margin-top: -5rpx;
													font-size: 40rpx;
													/* #endif */
												}
											}
										}
										.goods-price-bar-btn{
											width: 198rpx;
											height: 60rpx;
											text-align: center;
											line-height: 60rpx;
											background: linear-gradient(180deg, rgba(249, 232, 200, 0.91), rgba(251, 198, 124, 0.91), rgba(254, 178, 88, 0.91));
											box-shadow: 2rpx 4rpx 10rpx 0px rgba(154, 10, 2, 0.6);
											border-radius: 30rpx;
											font-size: 28rpx;
											color: #B61A14;
											font-weight: bold;
										}
									}
								}
							}
						}
					}
				}
				.national-day-shelf-2{
					width: 688rpx;
					margin: 50rpx auto 0;
					.national-day-shelf-2-top,.national-day-shelf-2-bottom{
						image{
							display: block;
							width: 688rpx;
							height: 37rpx;
							vertical-align: top;
						}
					}
					.national-day-shelf-2-content{
						background-image: url(https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/national-day/shelf-bg.png?v=1);
						background-size: 100%;
						background-repeat: repeat-y;
						padding: 0 15rpx;
						.goods-list{
							display: flex;
							flex-wrap: wrap;
							justify-content: space-between;
							.goods-item{
								width: 329rpx;
								margin-top: 30rpx;
								.goods-item-top,.goods-item-bottom{
									image{
										width: 100%;
										display: block;
									}
								}
								.goods-item-center{
									.goods-item-center-image{
										background-image: url(https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/national-day/single-goods-top-bg.png?v=1);
										background-size: 100%;
										background-repeat: repeat-y;
										padding: 0 20rpx 0 16rpx;
										position: relative;
										.tag{
											position: absolute;
											top: 20rpx;
											right: 35rpx;
											z-index: 2;
											width: 113rpx;
											height: 108rpx;
											text{
												position: absolute;
												z-index: 1;
												color: #FFF;
												/* #ifdef H5 || MP-WEIXIN */
												transform: rotate(22deg);
												/* #endif */
												/* #ifdef APP-PLUS */
												transform: rotate(20deg);
												/* #endif */
												top: 48rpx;
												left: 0;
												font-size: 24rpx;
												font-weight: bold;
												&.short{
													left: 10rpx;
												}
												&.one{
													left: 35rpx;
												}
												&.three{
													left: 25rpx;
												}
											}
											image{
												width: 113rpx;
												height: 108rpx;
											}
										}
										image.mainImg{
											width: 100%;
											border-bottom: solid 2rpx #ad221b;
										}
									}
									.goods-item-center-info{
										background-image: url(https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/national-day/single-goods-bottom-bg.png?v=1);
										background-size: 100%;
										background-repeat: repeat-y;
										padding: 0 30rpx 15rpx;
										.goods-name{
											white-space: nowrap;
											overflow: hidden;
											text-overflow: ellipsis;
											padding-top: 20rpx;
											color: #72140C;
											font-size: 28rpx;
										}
										.market-price{
											color: #72140C;
											font-size: 14rpx;
											text-decoration: line-through;
											margin-top: 10rpx;
											/* #ifdef H5 */
											transform: scale(.9);
											margin-left: -15rpx;
											/* #endif */
										}
										.goods-price-bar-btn{
											margin: 20rpx 5rpx 0 0;
											height: 60rpx;
											text-align: center;
											line-height: 60rpx;
											background: linear-gradient(180deg, rgba(249, 232, 200, 0.91), rgba(251, 198, 124, 0.91), rgba(254, 178, 88, 0.91));
											box-shadow: 2rpx 4rpx 10rpx rgba(154, 10, 2, 0.6);
											border-radius: 30rpx;
											font-size: 28rpx;
											color: #B61A14;
											font-weight: bold;
										}
										.sale-price{
											margin-top: 10rpx;
											font-size: 24rpx;
											white-space: nowrap;
											display: flex;
											align-items: center;
											color: #b8140b;
											.goods-price{
												color: #c12111;
												font-weight: bold;
												font-size: 50rpx;
												margin-top: -20rpx;
											}
										}
									}
								}
							}
						}
					}
				}
				.tips{
					font-size: 24rpx;
					color: #F0A658;
					opacity: .38;
					text-align: center;
					padding: 50rpx 0;
				}
			}
		}
	}
	.share{
		position: fixed !important;
		left: 0;
		top: 50rpx;
		bottom: 50rpx;
		left: 50rpx;
		right: 20rpx;
		pointer-events: none;
		z-index: 20;
		width: auto;
		height: auto;
		.service-img{
			position: absolute !important;
			width: 80rpx;
			height: 80rpx;
			pointer-events: auto;
			border-radius: 50%;
			top: initial;
			left: initial;
			right: 0;
			bottom: 0;
			bottom: constant(safe-area-inset-bottom);
			bottom: env(safe-area-inset-bottom);
			text-align: center;
			margin-bottom: 100rpx;
			image{
				width: 80rpx;
				height: 80rpx;
			}
		}
		.share-img{
			position: absolute !important;
			width: 80rpx;
			height: 80rpx;
			pointer-events: auto;
			border-radius: 50%;
			top: initial;
			left: initial;
			right: 0;
			bottom: 0;
			bottom: constant(safe-area-inset-bottom);
			bottom: env(safe-area-inset-bottom);
			text-align: center;
			image{
				width: 80rpx;
				height: 80rpx;
			}
		}
	}
</style>